<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <title>活动经历</title>        
        <script src="./Public/frozenui/js/lib/zeptojs/zepto.min.js"></script>
        <script src="./Public/frozenui/js/frozen.js"></script>
        <script src="./Public/timeFormat.js"></script>
        
        <link rel="stylesheet" href="./Public/Kmic/css/index.css">
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">   
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>    
        <script src="./Public/calendar/js/calendar.js"></script>
        <script src="./Public/pcSelect/jquery.cxselect.js"></script>   
        <link rel="stylesheet" type="text/css" href="./Public/calendar/calendar.css" />
    </head>
    <body>
        <div class="col-xs-12 ptm20">
            <form id="dosubmit" action="">
                 <div class="user_info mb20">
                    <div class="row">
                        <div class="col-xs-3 col999">活动名称</div>
                        <div class="col-xs-9 pl0"><input type="text"  name="title" value=""></div>
                        <div class="clearfix"></div>                 
                    </div>
                    <div class="boder1px"></div>
                    <div class="row">
                        <div class="col-xs-3 col999">活动时间</div>
                        <div class="col-xs-9 pl0">
                               <input type="text" id="dt"  name="time"  placeholder="活动开始日期">
                               <div id="dd"></div>
                        </div>
                        <div class="clearfix"></div>                 
                    </div>
                      <div class="boder1px"></div>
                 </div>
                <div class="row">
                    <div class="col-xs-12">
                        <div class="web_title"><span class="bl2px"></span> 活动图片</div>
                    </div>
                </div>
                
                <div class="ui-border-b file" >
                     <ul class="pics">
                            <li class="add col-xs-3">
                                <input id="file" type="file" accept="image/*" />
                                
                            </li>             
                        </ul>   
                </div>
                <input id="picID" name="picId" type="hidden" value="" >
                
                <div class="clearfix mb20"></div> 
                
                <div class="col-xs-12">
                <div class="row">
                    <div class="web_title"><span class="bl2px"></span> 视频链接</div>
                    <div class="video"><img width="35" src="./Public/Kmic/vidio.jpg" /> <input type="text"  name="video" value=""></div>
                    <div class="clearfix mb20"></div>   
                    <div  class="col999 mb10"><div class="zhuyi">!</div>请上传带http://前缀，建议选择优酷视频或腾讯视频。</div>
                </div>
                </div>
            </form>
          
        </div>
        
        <div class="clearfix"></div>
        <div class="col-xs-12">
           <div class="button_wbut text-center msg_subtim">提交</div>
        </div>
        <script src="./Public/localResizeIMG/dist/lrz.bundle.js"></script>
        <script>
            
            $('.show').fadeOut();
            var picNum = 0;
            var videoNum = 0;
            
            
            document.querySelector('#file').addEventListener('change', function () {
            $('.show').fadeIn();
            lrz(this.files[0],{width: 700})
                   .then(function (rst) {
                       // 处理成功会执行
//                       console.log(rst);
                        var xhr = new XMLHttpRequest();
                        var data = {
                            pic_type:6,
                            openid:'{$Think.get.openid}',
                            base64: rst.base64,
                            size: rst.base64.length // 校验用，防止未完整接收
                        };
                        xhr.open('POST', '?m=web&a=profiles&upload');
                        xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
                        xhr.onreadystatechange = function () {
//                            console.log(xhr.status);
                            if (xhr.readyState === 4 && xhr.status === 200) {
                                
                                var result = JSON.parse(xhr.response);
                                if (result.error == 0) {
                                    var picId= $("#picID").val()+","+result.picId;
                                    $("#picID").val(picId);
                                    $(".pics").prepend('<li id="'+picNum+'"><div class="delete" onclick="deletePic(\''+result.url+'\','+picNum+','+result.picId+')"><img src="./Public/Kmic/picDelete.png" /></div><img class="img-responsive" src="'+result.url+'" width="103"/></li>');
                                    picNum++;
                                    $('.show').fadeOut();
                                }
                            }
                            if (picNum >= 9) {
                                $('.add').css('display','none');
                            }else if (picNum >= 6) {
                                $('.file').css('height','420px');
                            }else if (picNum >= 3) {
                                $('.file').css('height','300px');
                            }
                        };
                        xhr.send(JSON.stringify(data)); // 发送base64
//                        });
                   })
                   .catch(function (err) {
                       // 处理失败会执行
                       $('.show').fadeOut();
                       console.log(rst);
                   })
                   .always(function () {
                       // 不管是成功失败，都会执行
                       
                   });
           });
           
  
    
            function deletePic(pic,num,picID){
                if(confirm("确定要删除数据吗？"))
                {
                    
                }else{
                    return;
                }
                $('#'+num).remove();
                $('.add').css('display','block');
                $.ajax({
                    cache: true,
                    type: "POST",
                    url:"?m=web&a=profiles",
                    data:{'delete':pic},// 序列号formid
                    dataType: 'json',
                    error: function(request) {


                    },
                    success: function(data) {
                        var D_picID = $("#picID").val();
                        picID = ","+picID;
                        D_picID = D_picID.replace(picID,"");           
                        $("#picID").val(D_picID) 
                        console.log(data);
                    }
                });
            } 
            
            $(".msg_subtim").click(function(){            
                $.ajax({
                    cache: true,
                    type: "POST",
                    url:"?m=Center&c=Profile&a=setActivity&action=msg",
                    data:$('#dosubmit').serialize(),// 序列号formid
                    async: false,
                    dataType: 'json',
                    error: function(request) {
                        alert('提交超时，请稍候再试！');
                    },
                    success: function(data) {
                        console.log(data);
                        if (data.error == 0) {
                            alert('发布成功！');
                          //  window.location.href="?m=web&a=profiles&openid={$Think.get.openid}";
                        }else if (data.error == 1) {
                            alert(data.msg);
                        }
                    }
                });
                
            });
            
             $('#dd').calendar({
                trigger: '#dt',
                zIndex: 999,
                        format: 'yyyy-mm-dd',
                onSelected: function (view, date, data) {
                    console.log('event: onSelected')
                },
                onClose: function (view, date, data) {
                    console.log('event: onClose')
                    console.log('view:' + view)
                    console.log('date:' + date)
                    console.log('data:' + (data || 'None'));
                }
            });

            $("#dt").click(function(){
                $("#bg").css("display","block");
            })
            
            $("#bg").click(function(){
                $("#bg").css("display","none");
            })    
            $("#dd").click(function(){
                $("#bg").css("display","none");
            })
        </script>
    </body>
</html>

